<!-- 司机详情 -->
<template>
  <div class="dashboard-container aside-box driver-detail">
    <el-card>
      <el-tabs
        v-model="activeName"
      >
        <el-tab-pane
          label="基本信息"
          name="basicInformation"
        >
          <driverInfo />
        </el-tab-pane>
        <el-tab-pane
          label="行驶证信息"
          name="truckLicense"
        >
          <driverDriving />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- //配置车辆弹窗 -->
  </div>
</template>
<script>
import driverInfo from './components/driver-info.vue'
import driverDriving from './components/driver-license.vue'
export default {
  components: {
    driverInfo, driverDriving
  },
  data() {
    return {
      activeName: 'basicInformation'
    }
  }
}
</script>
<style lang="scss" >

.el-tabs__item{
  padding-bottom:50px;
}
.el-tabs__item.is-active {
  font-weight:800;
  font-size:16px;
  color: #202338;
}
.el-tabs__active-bar {
    height: 3px;
    background-color: #ff643d;
    margin-left:20px;
}
.el-tabs__active-bar{
  width:50px;
}
.el-tabs__nav{
  padding-left:20px;
}

</style>

<style lang="scss" scoped>
.active {
  color: #ff643d;
}
.hanggao {
  margin: 15px 0;
}
.tupianshangchuan {
  background-color: #e5e7ec;
}
</style>

<style lang="scss" scoped>
.driver-detail {
    padding-left:20px;
  padding-right:20px;
  /deep/ .el-container {
    flex-direction: column;
    margin-left: 10px;
  }
  .naniu2 {
    background-color: #e15536;
    color: #fff;
    padding: 10px 35px;
    // margin: 50 80px;
  }
  .in {
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    /deep/ .el-aside {
      padding-bottom: 14px;
      width: 100% !important;
      display: flex;
      background-color: #ffffff;
      border-bottom: 1px solid #e5e7ec;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;
        }
      }
      .aside-item.active {
        font-size: 16px;
        font-weight: bold;
        color: #20232a;
        &:after {
          content: '';
          display: block;
          background-color: #e15536;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
